<template>
  <a-form-model ref="form_" :model="model.description" :rules="validatorRules_" slot="detail">
    <div class="sku-title">
      描述
      <a-button type="danger" @click="handleDelete" style="margin-left: 10px;">删除违禁词</a-button>
      <a-button type="primary" style="margin-left: 8px;" @click="handleReplaceBatch">批量添加</a-button>
      <a-input v-model.trim="text1" placeholder="请输入" style="width: 10%; margin-left: 8px;" ></a-input>
      <span style="font-size: 14px; font-weight: auto; margin: 0 4px;">替换成</span>
      <a-input v-model.trim="text2" placeholder="请输入" style="width: 10%;" ></a-input>
      <a-button type="primary" style="margin-left: 8px;" @click="handleReplace" v-if="text1 && text2">一键替换</a-button>
    </div>
    <a-row>
      <a-col :span="24">
        <div style="line-height: 40px;" class="ant-form-item-required">五点描述:</div>
        <div style="display: flex; flex-direction: column; width: 100%;">
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="point1">
            <sku-mark v-model="model.description.point1" placeholder="请输入" :highlightKey="forbiddenWord" pointId="point1" />
          </a-form-model-item>
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="point2">
            <sku-mark v-model="model.description.point2" placeholder="请输入" :highlightKey="forbiddenWord" pointId="point2" />
          </a-form-model-item>
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="point3">
            <sku-mark v-model="model.description.point3" placeholder="请输入" :highlightKey="forbiddenWord" pointId="point3" />
          </a-form-model-item>
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="point4">
            <sku-mark v-model="model.description.point4" placeholder="请输入" :highlightKey="forbiddenWord" pointId="point4" />
          </a-form-model-item>
          <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="point5">
            <sku-mark v-model="model.description.point5" placeholder="请输入" :highlightKey="forbiddenWord" pointId="point5" />
          </a-form-model-item>
        </div>
        <a-form-model-item label="产品描述" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}" prop="description">
          <sku-mark v-model="model.description.description" placeholder="请输入产品描述" :highlightKey="forbiddenWord" pointId="description" />
        </a-form-model-item>
      </a-col>
    </a-row>

    <a-modal v-model="visible" title="批量添加描述" @ok="handleOk" @cancel="handleCancel" width="800px">
      <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 }}">
        <a-textarea v-model="text3" :auto-size="{ minRows: 5 }" placeholder="请输入五点描述,系统识别 1、2、3、4、5、操作区分每条描述内容" />
      </a-form-model-item>
    </a-modal>
  </a-form-model>
</template>

<script>
import { getAction } from '@/api/manage'
import SkuMark from './SkuMark'
export default {
  name: 'SkuDescribe',
  components: { SkuMark },
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      text1: '',
      text2: '',
      text3: '',
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules_: {
        point1: [
          { required: true, message: '请输入!'},
          { validator: this.pointValidator }
        ],
        point2: [
          { required: true, message: '请输入!'},
          { validator: this.pointValidator }
        ],
        point3: [
          { required: true, message: '请输入!'},
          { validator: this.pointValidator }
        ],
        point4: [
          { required: true, message: '请输入!'},
          { validator: this.pointValidator }
        ],
        point5: [
          { required: true, message: '请输入!'},
          { validator: this.pointValidator }
        ],
        description: [
          { required: true, message: '请输入产品描述!'},
          { validator: this.pointValidator }
        ]
      },
      url: {}
    }
  },
  created(){},
  computed: {
    forbiddenWord(){
      return this.getForbiddenWord();
    }
  },
  inject: ['getForbiddenWord'],
  methods: {
    handleDelete(){
      this.forbiddenWord.forEach(item => {
        let point1 = this.model.description.point1 && this.model.description.point1.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'point1', point1);
        let point2 = this.model.description.point2 && this.model.description.point2.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'point2', point2);
        let point3 = this.model.description.point3 && this.model.description.point3.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'point3', point3);
        let point4 = this.model.description.point4 && this.model.description.point4.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'point4', point4);
        let point5 = this.model.description.point5 && this.model.description.point5.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'point5', point5);
        let description = this.model.description.description && this.model.description.description.replace(new RegExp(item, 'g'), '');
        this.$set(this.model.description, 'description', description);
      })
      this.getDescriptionList();
    },
    handleReplace(){
      let point1 = this.model.description.point1 && this.model.description.point1.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'point1', point1);
      let point2 = this.model.description.point2 && this.model.description.point2.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'point2', point2);
      let point3 = this.model.description.point3 && this.model.description.point3.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'point3', point3);
      let point4 = this.model.description.point4 && this.model.description.point4.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'point4', point4);
      let point5 = this.model.description.point5 && this.model.description.point5.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'point5', point5);
      let description = this.model.description.description && this.model.description.description.replace(new RegExp(this.text1, 'g'), this.text2);
      this.$set(this.model.description, 'description', description);
      this.getDescriptionList();
    },
    handleReplaceBatch(){
      this.visible = true;
    },
    handleOk(){
      let text3 = this.text3.replace('1、', '*-*');
      text3 = text3.replace('2、', '*-*');
      text3 = text3.replace('3、', '*-*');
      text3 = text3.replace('4、', '*-*');
      text3 = text3.replace('5、', '*-*');
      text3 = text3.split('*-*');
      this.$set(this.model.description, 'point1', text3[1]);
      this.$set(this.model.description, 'point2', text3[2]);
      this.$set(this.model.description, 'point3', text3[3]);
      this.$set(this.model.description, 'point4', text3[4]);
      this.$set(this.model.description, 'point5', text3[5]);
      this.getDescriptionList();
      this.handleCancel();
    },
    handleCancel(){
      this.text3 = '';
      this.visible = false;
    },
    getDescriptionList(){
      return new Promise((resolve, reject) => {
        this.$refs.form_.validate(valid => {
          if(valid){
            resolve(true);
          }else{
            resolve(valid);
          }
        })
      })
    },
    pointValidator(rules, value, callback){
      let flag = this.forbiddenWord.some(item => {
        return value.indexOf(item) > -1;
      })
      if(!value){
        callback('请输入!');
      }else{
        if(flag){
          callback('存在违禁词，请修改后提交!');
        }else{
          callback();
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.textarea {
  width: 100%;
  min-height: 73px;
  padding: 4px 11px;
  line-height: 1.5;
  font-size: 14px;
  border-radius: 4px;
          
  /*给div添加可以调整控制盒子大小的属性*/
  resize: both;
  overflow: auto;
          
  border: 1px solid #d9d9d9;
          
  display: block;
  box-sizing: border-box;
          
  font-size: 12px;
  outline: none;
}
/* 输入框为空时显示 placeholder */
.textarea:empty:before {
	content: attr(placeholder);
	color: #bfbfbf;
}
/* 输入框获取焦点时移除 placeholder */
.textarea:focus:before {
	content: none;
}
</style>